import React from 'react';
import './ToduList27.scss';
import { useState, useEffect } from 'react';
import ToduListFm from './ToduListFm';
import ToduListTb from './ToduListTb';
export default function ToduList27() {
  // 表格数据
  const [dataList, setDataList] = useState([]);
  // 获取列表数据
  const getList = () => {
    setDataList(
      [
        {
          title: '标题1',
          email: '2002/2/5',
          priority: 10,
          key: '1',
        },
        {
          title: '标题2',
          email: '2502/2/5',
          priority: 5,
          key: '2',
        },
      ].sort(compare)
    );
  };
  // 获取子组件传递的数据
  const onAdd = (data) => {
    setDataList(() => {
      return [...dataList, data].sort(compare);
    });
  };
  //比较函数
  const compare = function (x, y) {
    if (x.priority < y.priority) {
      return -1;
    } else if (x.priority > y.priority) {
      return 1;
    } else {
      return 0;
    }
  };
  useEffect(() => {
    if (!dataList.length) getList();
  });
  return (
    <div className="todolist-container">
      <header>
        <ToduListFm onAdd={onAdd} />
      </header>
      <section>
        <h2>列表</h2>
        <ToduListTb dataList={dataList} />
      </section>
    </div>
  );
}
